<!-- src/views/ConvertToWavenumber.vue -->
<template>
    <div class="wavalength_wavenumber_conversion">
        <h2>波长/波数转换工具</h2>
        <FileUpload @data-extracted="handleDataExtracted" />
        <div v-if="wavelengths.length && intensities.length">
        <h3>提取的数据</h3>
        <LineChart  :x="wavelengths" 
                    :y="intensities"
                    :fileName="fileName" />
  
        <el-input v-model="lambdaEx" placeholder="输入lambda_ex值" style="margin-top: 20px;" />
        <el-button type="primary" @click="convertToWavenumber" style="margin-top: 20px;">转换为波数</el-button>
  
        <div v-if="wavenumbers.length">
          <h3>波数和强度数据</h3>
          <LineChart :x="wavenumbers" 
                     :y="intensities"
                     :fileName="fileName" />
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import FileUpload from '@/components/FileUpload.vue';
  import LineChart from '@/components/LineChart.vue';
  
  export default {
    components: {
      FileUpload,
      LineChart
    },
    data() {
      return {
        wavelengths: [],
        intensities: [],
        wavenumbers: [],
        fileName : null,
        lambdaEx: null
      };
    },
    methods: {
      handleDataExtracted(data) {//接受子组件发送的信号（类似于槽函数）
        this.fileName = data.fileName;
        this.wavelengths = data.wavelengths;
        this.intensities = data.intensities;
      },
      convertToWavenumber() {
        if (this.lambdaEx) {
          this.wavenumbers = this.wavelengths.map(wavelength => (1 / this.lambdaEx - 1 / wavelength) * 10000000);
        } else {
          this.$message.error('请输入lambda_ex值');
        }
      }
    }
  };
  </script>
  
  <style scoped>
  .wavalength_wavenumber_conversion {
    padding: 20px;
  }

  .upload-demo {
    border: 2px dashed #d9d9d9;
    border-radius: 6px;
    background-color: #fafafa;
    text-align: center;
    padding: 20px;
    cursor: pointer;
  }
  </style>
  